<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>项目安装 | CatchAdmin 官网</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.2">
    <style>a[title="站长统计"]{display:none}</style>
    <script data-ad-client="ca-pub-1505209242532150" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script src="https://v1.cnzz.com/z_stat.php?id=1279921342&amp;web_id=1279921342"></script>
    <meta name="description" content="基于 Thinkphp & Vue 开发的后台管理框架">
    <meta name="keywords" content="catchadmin, 后台管理, 前后端分离, thinkphp后台管理框架, thinkphp前后端分离框架,php, elementui">
    <link rel="preload" href="/assets/css/0.styles.6834c255.css" as="style"><link rel="preload" href="/assets/js/app.d0396f44.js" as="script"><link rel="preload" href="/assets/js/2.1cef47df.js" as="script"><link rel="preload" href="/assets/js/27.3c6927ad.js" as="script"><link rel="prefetch" href="/assets/js/10.483f2013.js"><link rel="prefetch" href="/assets/js/11.981d4461.js"><link rel="prefetch" href="/assets/js/12.95d2c383.js"><link rel="prefetch" href="/assets/js/13.061c2fe0.js"><link rel="prefetch" href="/assets/js/14.ec2753db.js"><link rel="prefetch" href="/assets/js/15.8ba1c321.js"><link rel="prefetch" href="/assets/js/16.f7f0d34c.js"><link rel="prefetch" href="/assets/js/17.aac0bf62.js"><link rel="prefetch" href="/assets/js/18.2e2fe306.js"><link rel="prefetch" href="/assets/js/19.aee304b3.js"><link rel="prefetch" href="/assets/js/20.86a73bc1.js"><link rel="prefetch" href="/assets/js/21.8992c972.js"><link rel="prefetch" href="/assets/js/22.0a78500a.js"><link rel="prefetch" href="/assets/js/23.06342909.js"><link rel="prefetch" href="/assets/js/24.06fd96a3.js"><link rel="prefetch" href="/assets/js/25.00664d4e.js"><link rel="prefetch" href="/assets/js/26.c3d4b548.js"><link rel="prefetch" href="/assets/js/28.74498c0b.js"><link rel="prefetch" href="/assets/js/29.aae1a826.js"><link rel="prefetch" href="/assets/js/3.4d2bdca7.js"><link rel="prefetch" href="/assets/js/30.c7732a2c.js"><link rel="prefetch" href="/assets/js/31.20403043.js"><link rel="prefetch" href="/assets/js/32.7b8e9cfe.js"><link rel="prefetch" href="/assets/js/33.8610da11.js"><link rel="prefetch" href="/assets/js/4.d7b1015b.js"><link rel="prefetch" href="/assets/js/5.ff87de2e.js"><link rel="prefetch" href="/assets/js/6.0e91e688.js"><link rel="prefetch" href="/assets/js/7.ba30e213.js"><link rel="prefetch" href="/assets/js/8.35122549.js"><link rel="prefetch" href="/assets/js/9.081b18e5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6834c255.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active no-logo home-link"><!----> <span class="site-name">CatchAdmin 官网</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          🏠首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/docs/">
          📖文档
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/laravel/" class="router-link-active">
          📖Laravel
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/faq/">
          🤔FAQ
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/donate/">
          🎉赞助名单
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🚀仓库地址
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="ads"><div id="ads_1"><img src="https://cover.kancloud.cn/akasishikelu/thinkphp6!middle"> <span title="基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析">基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析</span></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/laravel/" aria-current="page" title="介绍" class="sidebar-link">介绍</a></li><li><a href="/laravel/install.html" aria-current="page" title="项目安装" class="active sidebar-link">项目安装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/laravel/install.html#环境要求" title="环境要求" class="sidebar-link">环境要求</a></li><li class="sidebar-sub-header"><a href="/laravel/install.html#安装-php-项目" title="安装 PHP 项目" class="sidebar-link">安装 PHP 项目</a></li><li class="sidebar-sub-header"><a href="/laravel/install.html#下载-vue-项目" title="下载 vue 项目" class="sidebar-link">下载 vue 项目</a></li><li class="sidebar-sub-header"><a href="/laravel/install.html#打包前端项目" title="打包前端项目" class="sidebar-link">打包前端项目</a></li></ul></li><li><a href="/laravel/module.html" title="模块" class="sidebar-link">模块</a></li><li><a href="/laravel/model.html" title="模型" class="sidebar-link">模型</a></li><li><a href="/laravel/console.html" title="命令" class="sidebar-link">命令</a></li><li><a href="/laravel/form.html" title="表单" class="sidebar-link">表单</a></li><li><a href="/laravel/table.html" title="表格组件" class="sidebar-link">表格组件</a></li><li><a href="/laravel/macros.html" title="扩展方法" class="sidebar-link">扩展方法</a></li><li><a href="/laravel/excel.html" title="Excel" class="sidebar-link">Excel</a></li><li><a href="/laravel/issue.html" title="常见问题" class="sidebar-link">常见问题</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="项目安装"><a href="#项目安装" class="header-anchor">#</a> 项目安装</h1> <h2 id="环境要求"><a href="#环境要求" class="header-anchor">#</a> 环境要求</h2> <p><code>CatchAdmin</code> 要求以下环境:</p> <ul><li>PHP &gt;= <code>7.2.*</code></li> <li>Mysql &gt;= <code>5.7.0</code></li> <li><code>PDO</code> Extension</li> <li><code>MBstring</code> Extension</li> <li><code>CURL</code> Extension</li> <li><code>ZIP</code> Extension</li> <li><code>Composer</code></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>一共需要安装两个项目，一是 PHP 的项目，二是 VUE 项目，请跟着下面的步骤走。</p></div> <h2 id="安装-php-项目"><a href="#安装-php-项目" class="header-anchor">#</a> 安装 PHP 项目</h2> <p>首先需要安装<code>composer</code>包管理器。<code>MAC</code>以及<code>LINUX</code>可使用下面的命令, <code>windows</code>直接下载<a href="https://getcomposer.org/download/" target="_blank" rel="noopener noreferrer">composer.exe<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>安装, 找到 <code>windows</code> 版本下载。</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">curl</span> -sS http://install.phpcomposer.com/installer <span class="token operator">|</span> php

// 由于某种原因，下载包会非常慢，所以需要修改镜像来加速，推荐阿里镜像。
<span class="token function">composer</span> config -g repo.packagist <span class="token function">composer</span> https://mirrors.aliyun.com/composer/
</code></pre></div><h3 id="安装一个空-laravel-项目"><a href="#安装一个空-laravel-项目" class="header-anchor">#</a> 安装一个空 Laravel 项目</h3> <div class="language-php extra-class"><pre class="language-php"><code>composer create<span class="token operator">-</span>project <span class="token operator">--</span>prefer<span class="token operator">-</span>dist laravel<span class="token operator">/</span>laravel catchadmin
</code></pre></div><h3 id="安装-catchadmin-核心依赖"><a href="#安装-catchadmin-核心依赖" class="header-anchor">#</a> 安装 CatchAdmin 核心依赖</h3> <div class="language-php extra-class"><pre class="language-php"><code>composer <span class="token keyword">require</span> jaguarjack<span class="token operator">/</span>catchadmin<span class="token operator">-</span>laravel <span class="token operator">--</span>ignore<span class="token operator">-</span>platform<span class="token operator">-</span>reqs
</code></pre></div><h3 id="安装后台-按照提示输入对应信息即可"><a href="#安装后台-按照提示输入对应信息即可" class="header-anchor">#</a> 安装后台, 按照提示输入对应信息即可</h3> <div class="language-php extra-class"><pre class="language-php"><code>php artisan <span class="token keyword">catch</span><span class="token punctuation">:</span>install
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>install 又一个可选参数 --root=catch，默认模块会下载到该目录</p></div> <h3 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h3> <ul><li>安装会默认使用 <code>git clone https://github.com/JaguarJack/catch-laravel-modules.git</code> 下载目录</li> <li>安装会默认加入 <code>psr-4 autoload</code>，项目的命名空间 <code>CatchAdmin\\</code></li> <li>安装会默认执行 <code>composer dump-autoload</code></li></ul> <p>所以建议要安装 <code>Git</code> 和 <code>Composer</code>，安装的时候会自动执行。</p> <h3 id="启动后台"><a href="#启动后台" class="header-anchor">#</a> 启动后台</h3> <div class="language-php extra-class"><pre class="language-php"><code>php artisan serve
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意不能直接访问 PHP 项目，导致 Exception，前后端分离，需要通过 API 接口形式访问，所以你需要安装 VUE 项目后台，看到数据的展示</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果你是第一次使用 VUE，建议先去看看 VUE 文档，了解一下。</p></div> <h2 id="下载-vue-项目"><a href="#下载-vue-项目" class="header-anchor">#</a> 下载 vue 项目</h2> <p>在使用前端项目之前，你需要安装前端管理器，这个不多做解释了。推荐使用<code>yarn</code> 安装，首先你需要安装 <code>yarn</code> 管理器。使用淘宝镜像。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果安装不上，有各种各样的错误，别担心，一般都是网络问题。并不是项目问题，这个是很多使用者刚开始都有的问题。你只需要解决网络问题就行了。</p></div> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org/
</code></pre></div><h4 id="下载项目"><a href="#下载项目" class="header-anchor">#</a> 下载项目</h4> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">git</span> clone https://github.com/yanwenwu/catch-admin-vue.git
</code></pre></div><h4 id="进入目录-使用-yarn-安装"><a href="#进入目录-使用-yarn-安装" class="header-anchor">#</a> 进入目录,使用 yarn 安装</h4> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">install</span>
</code></pre></div><h4 id="配置接口地址-找到-vue-项目下的"><a href="#配置接口地址-找到-vue-项目下的" class="header-anchor">#</a> 配置接口地址，找到 vue 项目下的</h4> <ul><li><code>.env.development</code> 文件是配置开发环境的 API 接口地址 (实际上就是 PHP 项目的地址)</li></ul> <h4 id="启动开发模式"><a href="#启动开发模式" class="header-anchor">#</a> 启动开发模式</h4> <p>请先在前端项目根目录下的<code>.env.development</code> 文件设置 <code>VUE_APP_BASE_API</code>开发环境的 API 请求地址</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># just a flag</span>
ENV <span class="token operator">=</span> <span class="token string">'development'</span>

<span class="token comment"># base api</span>
VUE_APP_BASE_API <span class="token operator">=</span> <span class="token string">'http://127.0.0.1:9090'</span>
</code></pre></div><p>然后启动项目</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> run dev
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>vue 后台使用了是 <code>element admin</code> <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/" target="_blank" rel="noopener noreferrer">文档地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <h2 id="打包前端项目"><a href="#打包前端项目" class="header-anchor">#</a> 打包前端项目</h2> <p>打包前请先配置正是环境 API 地址。在项目的根目录下的<code>.env.production</code>文件配置</p> <div class="language- extra-class"><pre class="language-text"><code># just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '正式环境的 API 地址'
</code></pre></div><p>然后进行打包</p> <div class="language- extra-class"><pre class="language-text"><code>npm run build:prod
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>前端项目配置最好开启 <code>Gzip</code>,可以加速前端项目访问速度。</p></div> <h4 id="推荐配置"><a href="#推荐配置" class="header-anchor">#</a> 推荐配置</h4> <div class="language-sh extra-class"><pre class="language-sh"><code>http <span class="token punctuation">{</span>
    include       /etc/nginx/mime.types<span class="token punctuation">;</span>
    default_type  application/octet-stream<span class="token punctuation">;</span>

    log_format  main  <span class="token string">'<span class="token variable">$remote_addr</span> - <span class="token variable">$remote_user</span> [<span class="token variable">$time_local</span>] &quot;<span class="token variable">$request</span>&quot; '</span>
                      <span class="token string">'<span class="token variable">$status</span> <span class="token variable">$body_bytes_sent</span> &quot;<span class="token variable">$http_referer</span>&quot; '</span>
                      <span class="token string">'&quot;<span class="token variable">$http_user_agent</span>&quot; &quot;<span class="token variable">$http_x_forwarded_for</span>&quot;'</span><span class="token punctuation">;</span>

    access_log  /var/log/nginx/access.log  main<span class="token punctuation">;</span>

    sendfile        on<span class="token punctuation">;</span>
    <span class="token comment">#tcp_nopush     on;</span>

    keepalive_timeout  <span class="token number">65</span><span class="token punctuation">;</span>

    <span class="token comment">#gzip 配置</span>
    <span class="token function">gzip</span>  on<span class="token punctuation">;</span>
    gzip_min_length 1k<span class="token punctuation">;</span>
    gzip_comp_level <span class="token number">4</span><span class="token punctuation">;</span>
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript <span class="token punctuation">;</span>
    gzip_static on<span class="token punctuation">;</span>
    gzip_vary on<span class="token punctuation">;</span>
    gzip_buffers <span class="token number">8</span> 16k<span class="token punctuation">;</span>


    include /etc/nginx/conf.d/*.conf<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/catch-admin/document/edit/master/docs/laravel/install.md" target="_blank" rel="noopener noreferrer">在 Github 编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/laravel/" class="prev router-link-active"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        介绍
      </a></span> <span class="next"><a href="/laravel/module.html">
        模块
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.d0396f44.js" defer></script><script src="/assets/js/2.1cef47df.js" defer></script><script src="/assets/js/27.3c6927ad.js" defer></script>
  </body>
</html>